<template>
  <div class="main">
    <div id="search">
      <form action="#" onsubmit="return false">
        <input type="text" placeholder="搜索" v-model="searchData" />
        <button @click="toSearch"><span></span>搜索</button>
      </form>
    </div>
    <div id="content">
      <div class="contentBar">
        <ul>
          <li @click="toFollow" :id="atPresent=='Follow'? 'atPresent':''">关注</li>
          <li @click="toRecommend" :id="atPresent=='Recommend'? 'atPresent':''">推荐</li>
        </ul>
      </div>
      <ul>
        <li v-for="item in nodeData" :key="item.id" @click="toNodeDetail(item)">
          <NodeLi :nodeData="item" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
import NodeLi from "@/components/nodeListValue/NodeLi.vue";
export default {
  data() {
    return {
      // 内容展示区展示的笔记
      nodeData: [],
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      // 用户所在页面判断，默认在推荐页
      atPresent: "Recommend",
      // 用户输入搜索框的数据
      searchData: "",
    };
  },
  components: {
    NodeLi,
  },
  methods: {
    // 点击关注事件
    toFollow() {
      // 判断用户是否登录
      if (getCookie("userId") == null) {
        alert("您还未登录，无法查看您的关注");
        return;
      }
      // 页数重置
      this.page.currentPage = 1;
      // 修改当前页标志位，当前在关注页
      this.atPresent = "Follow";
      // 清空展示区展示笔记内容
      this.nodeData = [];
      // 获取我关注用户的笔记
      this.getFollowerNode(this.page.currentPage, this.page.pageSize);
    },
    // 点击推荐事件
    toRecommend() {
      // 页数重置
      this.page.currentPage = 1;
      // 修改当前页标志位，当前在推荐页
      this.atPresent = "Recommend";
      // 清空展示区展示笔记内容
      this.nodeData = [];
      // 获取我关注用户的笔记
      this.getSomeNode(this.page.currentPage, this.page.pageSize);
    },
    // 将后端返回数据[nodes]和[usernames]合并在[nodes]中返回[nodes]
    aggregateData(res) {
      res.data.data.nodes.forEach((element, index) => {
        element["username"] = res.data.data.users[index];
      });
      return res.data.data.nodes;
    },
    // 滚动处理事件
    pageScroll() {
      // 获取滚动距离(当前屏幕最上方距离页面最顶部的距离)
      let scrollTop = document.documentElement.scrollTop;
      // 获取滚动高度(整个HTML高度,页面内容的高度)
      let scrollHeight = document.documentElement.scrollHeight;
      // 获取屏幕高度
      let clientHeight = document.documentElement.clientHeight;
      // 当滚动距离+屏幕高度 >= 内容高度，证明到底，加载新数据
      if (scrollTop + clientHeight >= scrollHeight) {
        // 判断当前在关注页还是推荐页
        // 在关注页就加载关注页内容
        if (this.atPresent == "Follow") {
          this.getFollowerNode(this.page.currentPage, this.page.pageSize);
        }
        // 在推荐页就加载推荐页内容
        if (this.atPresent == "Recommend") {
          this.getSomeNode(this.page.currentPage, this.page.pageSize);
        }
      }
    },
    // 请求加载推荐数据
    getSomeNode(CurrentPage, pageSize) {
      this.$axios({
        method: "get",
        url: "http://localhost:8181/node/find/" + CurrentPage + "/" + pageSize,
      }).then(
        (res) => {
          // 得到的数据添加到数据数组中
          this.aggregateData(res).forEach((element) => {
            this.nodeData.push(element);
          });
          // 当前页数+1
          this.page.currentPage += 1;
        },
        (err) => {
          console.log("发送失败" + err);
        }
      );
    },
    // 请求加载关注用户的笔记
    getFollowerNode(CurrentPage, pageSize) {
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/node/findFollowerNode/" +
          CurrentPage +
          "/" +
          pageSize +
          "/" +
          getCookie("userId"),
      }).then(
        (res) => {
          // 得到的数据添加到数据数组中
          this.aggregateData(res).forEach((element) => {
            this.nodeData.push(element);
          });
          // 当前页数+1
          this.page.currentPage += 1;
        },
        (err) => {
          console.log("发送失败" + err);
        }
      );
    },
    // 点击搜索按钮，跳转至搜索
    toSearch() {
      const routeData = this.$router.resolve({
        path: "/main/search",
        query: {
          search: this.searchData,
        },
      });
      window.open(routeData.href, "_blank");
    },
    // 点击笔记跳转
    toNodeDetail(item){
      const routeData = this.$router.resolve({
        path: "/nodeDetail",
        query: {
          // 将笔记数据传递给跳转的路由，便于显示对应笔记的内容
          className: item.className,
          id: item.id,
          language: item.language,
          nodename: item.nodename,
          popularity: item.popularity,
          time: item.time,
          username: item.username,
          userId: item.userId,
          description: item.description,
        },
      });
      window.open(routeData.href, "_blank");
    }
  },
  mounted() {
    // 请求10篇笔记数据
    this.getSomeNode(this.page.currentPage, this.page.pageSize);
    // 监听页面滚动
    window.onscroll = this.pageScroll;
  },
};
</script>

<style scoped>
.main {
  height: auto;
  padding-bottom: 30px;
}
#search {
  width: 740px;
  height: 50px;
  border-bottom: 1px solid #39383e;
}
#search input[type="text"] {
  background: none;
  height: 30px;
  width: 250px;
  margin: 10px 0 0 20px;
  border-radius: 20px;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid #39383e;
  outline: none;
  color: #fff;
}
span {
  font-family: "icomoon";
  margin: 0 5px;
}
#search button {
  height: 30px;
  width: 100px;
  margin: 10px 0 0 10px;
  color: #fff;
  border: 1px solid #39383e;
  border-radius: 20px;
  background: none;
  cursor: pointer;
}
#atPresent {
  color: #6d5ed4;
  font-weight: 700;
}
.contentBar {
  width: 740px;
  height: 50px;
  border-bottom: #39383e solid 1px;
}
.contentBar ul {
  list-style: none;
  height: 50px;
  width: 740px;
}
.contentBar li {
  display: inline-block;
  height: 50px;
  margin-left: 10px;
  line-height: 50px;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  font-size: large;
  cursor: pointer;
}
#content ul {
  list-style: none;
}
</style>